<template>
  <div class="list" ref="wrapper">
    <div>
      <div class="item">
        <div class="title border-topbottom">当前城市</div>
        <ul class="content">
          <li class="button"><div class="button-title">{{ $store.state.city }}</div></li>
        </ul>
      </div>
      <div class="item">
        <div class="title border-topbottom">热门城市</div>
        <ul class="content">
          <li class="button" v-for="item in hot" :key="item.id"><div class="button-title" @click="handleCityClick(item.name)">{{ item.name }}</div></li>
        </ul>
      </div>
      <div class="item" v-for="(item,key) in cities" :key="key" :ref="key">
        <div class="title border-topbottom">{{ key }}</div>
        <ul class="content">
          <li class="button"  v-for="innerItem in item" :key="innerItem.id" @click="handleCityClick(innerItem.name)"><div class="button-title">{{ innerItem.name }}</div></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  name: 'CityList',
  props: {
    hot: Array,
    cities: Object,
    letter: String
  },
  methods: {
    // 点击城市名跳转回首页
    handleCityClick (city) {
      // 修改$store中的city值
      this.$store.commit('changeCity', city)
      this.$router.push('/')
    }
  },
  mounted () {
    // 注册滚动事件
    this.scroll = new BScroll(this.$refs.wrapper)
  },
  watch: {
    // 监听城市名是否变动
    letter () {
      if (this.letter) {
        // 获取指定的字母城市
        const element = this.$refs[this.letter][0]
        // 通过better-scroll中的scrollToElement 滚动到指定位置
        this.scroll.scrollToElement(element)
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
   .border-topbottom
     &:before
       border-color: #ccc
     &:after
       border-color: #ccc
   .border-bottom
     &:before
       border-color: #ccc
    .list
      overflow hidden
      position absolute
      top 1.58rem
      left 0
      right 0
      bottom 0
      .title
        line-height .72rem
        background-color #eee
        font-size .26rem
        color #666
        padding-left .2rem
      .content
        overflow: hidden
       .button
         width 33.33%
         float left
         .button-title
            border-bottom .02rem solid #ccc
            border-right .02rem solid #ccc
            text-align center
            font-size .28rem
            color #212121
            padding .3rem
</style>
